<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui">

    <!-- begin: feature_wrapper -->
    <div id="feature_wrapper" class="clear_fix">
        <!-- begin: feature_left_col -->
        <div id="feature_left_col" class="jcarousel-container">
            <div id="feature_desc_wrapper" class="jcarousel-clip">
                <ul id="feature_carousel_desc" class="jcarousel-list">
                    <c:forEach items="#{homepageController.featuredAdvertisements}" var="adv">
                        <c:if test="#{not empty adv.sellingHouse}">
                        <li>
                            <h2><a href="#">#{adv.title}</a></h2>
                            <div class="carousel_desc"><p><h:outputText value="#{homepageController.summarized(adv.description)}" escape="false"/></p></div>
                            <p class="carousel_desc_adl_info">City: <b>#{adv.sellingHouse.city}</b> | Location: #{adv.sellingHouse.location}</p>
                            <p class="carousel_desc_info">#{adv.sellingHouse.noOfBedrooms} Bed(s) &bull; #{adv.sellingHouse.noOfBathrooms} Bath(s)</p>
                            <p class="carousel_desc_price">Price: <h:outputText value="#{adv.sellingHouse.price}">
                                <f:convertNumber currencySymbol="$ " type="currency" maxFractionDigits="0"/>
                            </h:outputText></p>
                            <p><a target="_blank" href="detail.jsf?id=#{adv.advertisingID}" class="carousel_desc_readmore">Read More &raquo;</a></p>
                        </li>
                        </c:if>
                        <c:if test="#{not empty adv.rentalBasisAccommodation}">
                        <li>
                            <h2><a target="_blank" href="detail.jsf?id=#{adv.advertisingID}">#{adv.title}</a></h2>
                            <div class="carousel_desc"><p><h:outputText value="#{homepageController.summarized(adv.description)}" escape="false"/></p></div>
                            <p class="carousel_desc_adl_info">City: <b>#{adv.rentalBasisAccommodation.city}</b> | Location: #{adv.rentalBasisAccommodation.location}</p>
                            <p class="carousel_desc_info">#{adv.rentalBasisAccommodation.noOfBedrooms} Bed(s) &bull; #{adv.rentalBasisAccommodation.noOfBathrooms} Bath(s)</p>
                            <p class="carousel_desc_price">Price: <h:outputText value="#{adv.rentalBasisAccommodation.rent}">
                                <f:convertNumber currencySymbol="$ " type="currency" maxFractionDigits="0"/>
                            </h:outputText> / Month</p>
                            <p><a target="_blank" href="detail.jsf?id=#{adv.advertisingID}" class="carousel_desc_readmore">Read More &raquo;</a></p>
                        </li>
                        </c:if>
                    </c:forEach>
                </ul>
                <div><a href="#" class="carousel_desc_prev"><span class="hide_this">Prev</span></a> <a href="#" class="carousel_desc_next"><span class="hide_this">Next</span></a></div>
            </div>
        </div>
        <!-- end: feature_left_col -->
        <!-- begin: feature_right_col -->
        <div id="feature_right_col" class="jcarousel-container">
            <div id="feature_image_wrapper" class="jcarousel-clip">
                <ul id="feature_carousel" class="jcarousel-list">
                    <c:forEach items="#{homepageController.featuredAdvertisements}" var="adv">
                    <li><a target="_blank" href="detail.jsf?id=#{adv.advertisingID}"><img src="#{adv.imagePath}" width="600" height="250" alt="#{adv.title}" /></a></li>
                    </c:forEach>
                </ul>
            </div>
            <div id="feature_controller" class="fix_png">
                <ul class="jcarousel-control">
                    <c:forEach items="#{homepageController.featuredAdvertisements}" var="adv" varStatus="loop">
                    <li><a href="#" rel="#{loop.index+1}"><img src="#{adv.imagePath}" width="48" height="48" alt="#{adv.title}" /></a></li>
                    </c:forEach>
                </ul>
                <p id="feature_scroll_left" class="fix_png"><a href="#"><span class="hide_this">Prev</span></a></p>
                <p id="feature_scroll_right" class="fix_png"><a href="#"><span class="hide_this">Next</span></a></p>
            </div>
        </div>
        <!-- end: feature_right_col -->
    </div>
    <!-- end: feature_wrapper -->
</ui:composition>